<style scoped>
  tbody .table-namespace-col:hover {
    font-size: 1.2em;
  }
</style>
<template>
  <div class="banner-table-con">
    <Table :columns="columns" :data="data" :loading="loading"></Table>

    <!-- 编辑 -->
    <Modal v-model="updateBannerModal.show" width="360" :mask-closable="false">

      <p slot="header" style="text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>编辑滚动图</span>
      </p>

      <div>
        <Form :model="updateBannerModal.form" label-position="top">
          <FormItem label="滚动图编号">
            <Input v-model="updateBannerModal.form.id" disabled/>
          </FormItem>
          <FormItem label="* 项目">
            <Select v-model="updateBannerModal.form.projectId">
              <Option v-for="projects in projectsList" :key="projects.id" :value="projects.id">{{projects.name}}
              </Option>
            </Select>
          </FormItem>
        </Form>
      </div>

      <div slot="footer">
        <Button type="primary" :loading="updateBannerModal.loading" @click="handleUpdateBanner(updateBannerModal.form)"
                long>
          <span v-if="!updateBannerModal.loading">更新模块</span>
          <span v-else>更新请求提交中</span>
        </Button>
      </div>
    </Modal>

    <!-- 删除 -->
    <Modal v-model="removeBannerModal.show" width="360">

      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>确认删除模块</span>
      </p>

      <div style="text-align:center">
        <p>此操作将会导致相关模块及功能<b style="padding:0 5px;color: red;">不可用</b>，请确认是否删除？</p>
      </div>

      <div slot="footer">
        <Button type="text" @click="removeBannerModal.show=false">取消</Button>
        <Button type="error" :loading="removeBannerModal.loading" @click="handleRemoveBanner(removeBannerModal.banner)">
          <span v-if="!removeBannerModal.loading">确认删除</span>
          <span v-else>正在删除</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'

  export default {
    name: "BannerTable",
    props: ['data', 'loading'],
    data() {
      return {
        // 表格列配置
        columns: [
          {
            title: '项目名称',
            key: 'name',
            align: 'center'
          },
          {
            title: '项目封面',
            key: 'thumbnail',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    width: 60,
                    src: params.row.thumbnail
                  }
                }),
              ]);
            }
          },
          {
            title: '添加时间',
            key: 'createdDate',
            align: 'center'
          },
          {
            title: '操作',
            width: 200,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.updateBanner(params.row)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.removeBanner(params.row)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],

        // 更新模块模态框
        updateBannerModal: {
          show: false,
          form: {
            id: 0,
            type: 1,
            projectId: ''
          },
          loading: false
        },

        // 模块删除模态框
        removeBannerModal: {
          show: false,
          banner: {},
          loading: false
        }
      }
    },
    computed: {
      ...mapState('home', {
        projectsList: state => state.banner.projectsList
      })
    },
    methods: {
      ...mapActions('home/banner', [
        'listProjects'
      ]),
      // 更新模块
      updateBanner(banner) {
        let updateBannerModal = this.updateBannerModal;

        let keys = Object.keys(updateBannerModal.form);
        keys.forEach(key => {
          updateBannerModal.form[key] = banner[key];
        })
        updateBannerModal.form.alias = banner.alias
        updateBannerModal.show = true;
      },
      handleUpdateBanner(bannerForm) {
        let updateBannerModal = this.updateBannerModal;
        updateBannerModal.loading = true;
        bannerForm.type = 1
        this.$emit('on-update-banner', bannerForm, (status) => {
          if (status) {
            updateBannerModal.show = false;
            Object.assign(this.$data.updateBannerModal.form, this.$options.data().updateBannerModal.form)
          }
          updateBannerModal.loading = false;
        })
      },

      // 删除滚动图
      removeBanner(banner) {
        let removeBannerModal = this.removeBannerModal;
        removeBannerModal.show = true;
        removeBannerModal.banner = banner;
      },
      handleRemoveBanner(banner) {
        let removeBannerModal = this.removeBannerModal;
        removeBannerModal.loading = true;
        this.$emit('on-remove-banner', banner, (status) => {
          if (status) {
            removeBannerModal.show = false
            removeBannerModal.banner = {}
          }
          removeBannerModal.loading = false
        })
      }
    },
    created() {
      this.listProjects()
    }
  }
</script>


